h3 Widgets


// START row
.row
  .col-lg-4
    // START widget
    .panel.widget
      .panel-body
        .text-right.text-muted
          em.fa.fa-gamepad.fa-2x
        h3.mt0 99.999
        p.text-muted Games played last month
        .progress.progress-striped.progress-xs
          .progress-bar.progress-bar-warning.progress-60(role='progressbar', aria-valuenow='60', aria-valuemin='0', aria-valuemax='70')
            span.sr-only 60% Complete
    // END widget
  .col-lg-4
    // START widget
    .panel.widget
      .panel-body
        .text-right.text-muted
          em.fa.fa-coffee.fa-2x
        h3.mt0 300 
        p.text-muted Coffee cups per day
        .progress.progress-striped.progress-xs
          .progress-bar.progress-bar-green.progress-80(role='progressbar', aria-valuenow='80', aria-valuemin='0', aria-valuemax='100')
            span.sr-only 80% Complete
    // END widget
  .col-lg-4
    // START widget
    .panel.widget
      .panel-body
        .text-right.text-muted
          em.fa.fa-upload.fa-2x
        h3.mt0 1000 Gb
        p.text-muted Average Monthly Uploads
        .progress.progress-striped.progress-xs
          .progress-bar.progress-bar-info.progress-40(role='progressbar', aria-valuenow='40', aria-valuemin='0', aria-valuemax='100')
            span.sr-only 40% Complete
    // END widget
// END row
// START row
.row
  .col-lg-4
    // START widget
    .panel.widget
      .row.row-table.row-flush
        .col-xs-6.bb.br
          .row.row-table.row-flush
            .col-xs-4.text-center.text-info
              em.fa.fa-users.fa-2x
            .col-xs-8
              .panel-body.text-center
                h4.mt0 10k
                p.mb0.text-muted VISITORS
        .col-xs-6.bb
          .row.row-table.row-flush
            .col-xs-4.text-center.text-danger
              em.fa.fa-music.fa-2x
            .col-xs-8
              .panel-body.text-center
                h4.mt0 100%
                p.mb0.text-muted VOLUME

      .row.row-table.row-flush
        .col-xs-6.br
          .row.row-table.row-flush
            .col-xs-4.text-center.text-inverse
              em.fa.fa-code-fork.fa-2x
            .col-xs-8
              .panel-body.text-center
                h4.mt0 150 
                p.mb0.text-muted FORKS
        .col-xs-6
          .row.row-table.row-flush
            .col-xs-4.text-center.text-success
              em.fa.fa-inbox.fa-2x
            .col-xs-8
              .panel-body.text-center
                h4.mt0 10
                p.mb0.text-muted NEW MESSAGES
    // END widget
    // START widget
    .panel.widget
      .row.row-table.row-flush
        .col-xs-6.bb.br
          .row.row-table.row-flush
            .col-xs-4.text-center.text-info
              // Bar chart
              div(sparkline="", data-bar-color="{{colorByName('primary')}}", data-height="20", data-bar-width="3", data-bar-spacing="2", values="5,9,4,1,3,4,7,5")
            .col-xs-8
              .panel-body.text-center
                h4.mt0 10k
                p.mb0.text-muted VISITORS
        .col-xs-6.bb
          .row.row-table.row-flush
            .col-xs-4.text-center.text-danger
              // Bar chart
              div(sparkline="", data-bar-color="{{colorByName('primary')}}", data-height="20", data-bar-width="3", data-bar-spacing="2", values="1,2,3,4,5,6,7,8,9")
            .col-xs-8
              .panel-body.text-center
                h4.mt0 100%
                p.mb0.text-muted CONVERSIONS

      .row.row-table.row-flush
        .col-xs-6.br
          .row.row-table.row-flush
            .col-xs-4.text-center.text-inverse
              // Bar chart
              div(sparkline="", data-bar-color="{{colorByName('primary')}}", data-height="20", data-bar-width="3", data-bar-spacing="2", values="1,0,4,9,5,7,8,4,7")
            .col-xs-8
              .panel-body.text-center
                h4.mt0 150 
                p.mb0.text-muted RETURNS
        .col-xs-6
          .row.row-table.row-flush
            .col-xs-4.text-center.text-success
              // Bar chart
              div(sparkline="", data-bar-color="{{colorByName('primary')}}", data-height="20", data-bar-width="3", data-bar-spacing="2", values="1,5,2,2,8,4,4,8")
            .col-xs-8
              .panel-body.text-center
                h4.mt0 10
                p.mb0.text-muted UNIQUES
    // END widget
  .col-lg-4
    // START widget
    .panel.widget
      .half-float
        img.img-responsive(src="app/img/bg3.jpg",alt="")
        .half-float-bottom
          img.img-thumbnail.img-circle.thumb128(src='app/img/user/09.jpg', alt="Image")
      .panel-body.text-center
        h3.m0 Ted Berry
        p.text-muted Lead director
        p Proin metus justo, commodo in ultrices at, lobortis sit amet dui. Fusce dolor purus, adipiscing a tempus at, gravida vel purus. 
      .panel-body.text-center.bg-gray-dark
        .row.row-table
          .col-xs-4
            h3.m0 400
            p.m0 Photos
          .col-xs-4
            h3.m0 2000
            p.m0 Likes
          .col-xs-4
            h3.m0 500
            p.m0 Following
    // END widget
  .col-lg-4
    // START widget
    .panel.widget
      .panel-body.text-center.bg-center(style="background-image: url('app/img/bg4.jpg')")
        .row.row-table
          .col-xs-12.text-white
            img.img-thumbnail.img-circle.thumb128(src='app/img/user/06.jpg', alt="Image")
            h3.m0 Chris
            p.m0
              em.fa.fa-twitter.fa-fw
              |  @chris

      .panel-body.text-center.bg-gray-darker
        .row.row-table
          .col-xs-4
            a(href="#").text-white: em.fa.fa-twitter.fa-2x
          .col-xs-4
            a(href="#").text-white: em.fa.fa-facebook.fa-2x
          .col-xs-4
            a(href="#").text-white: em.fa.fa-comments.fa-2x
      .list-group
        a(href="#").list-group-item
          span.label.label-primary.pull-right 15
          em.fa.fa-fw.fa-clock-o.text-muted
          |  Recent Activity
        a(href="#").list-group-item
          span.label.label-primary.pull-right 100
          em.fa.fa-fw.fa-user.text-muted
          |  Following
        a(href="#").list-group-item
          span.label.label-primary.pull-right 300
          em.fa.fa-fw.fa-folder-open-o.text-muted
          |  Photos
    // END widget
// END row
// START row
.row
  .col-lg-4.col-md-6
    // START widget
    .panel.widget.bg-success
      .row.row-table
        .col-xs-4.text-center.bg-success-dark.pv-lg
          em.icon-share.fa-3x
        .col-xs-8.pv-lg
          .h1.m0.text-bold 150
          .text-uppercase New connections
  .col-lg-4.col-md-6
    // START widget
    .panel.widget.bg-danger
      .row.row-table
        .col-xs-4.text-center.bg-danger-dark.pv-lg
          em.icon-star.fa-3x
        .col-xs-8.pv-lg
          .h1.m0.text-bold 7000
          .text-uppercase Ratings received
  .col-lg-4.col-md-12
    // START widget
    .panel.widget.bg-warning
      .row.row-table
        .col-xs-4.text-center.bg-warning-dark.pv-lg
          em.icon-trophy.fa-3x
        .col-xs-8.pv-lg
          .h1.m0.text-bold 10
          .text-uppercase Achievements
// END row
// START row
.row
  .col-lg-4
    // START widget
    .panel.widget
      .panel-body.bg-success
        .h5.mt0 Received all time
        // Line chart
        div(sparkline="", values="1,3,4,7,5,9,4,4,7,5,9,6,4", data-type='line', data-height='80', data-width='100%', data-line-width='2', data-line-color='#dddddd', data-spot-color='#bbbbbb', data-fill-color='', data-highlight-line-color='#fff', data-spot-radius='3', data-resize='true')
        // Bar chart
        .text-center
          div(sparkline="", data-bar-color="#fff", data-height="50", data-bar-width="6", data-bar-spacing="6", values="1,3,4,7,5,9,4,4,7,5,9,6,4")
      .panel-body.bg-inverse
        .row.row-table.text-center
          .col-xs-4
            p.m0.h3 15080
            p.m0.text-muted Shots
          .col-xs-4
            p.m0.h3 12000
            p.m0.text-muted Likes
          .col-xs-4
            p.m0.h3 5100
            p.m0.text-muted Comments
    // END widget
  .col-lg-4
    // START widget
    .panel.widget
      .panel-body.bg-primary
        .h5.mt0 Monthly incomes
        // Line chart
        div(sparkline="",data-type='line', data-height='80', data-width='100%', data-line-width='2', data-line-color='#dddddd', data-spot-color='#bbbbbb', data-fill-color='', data-highlight-line-color='#fff', data-spot-radius='3', data-resize='true', values="1,3,4,7,5,9,4,4,7,5,9,6,4")
      .panel-body.bg-inverse
        .row.text-center
          .col-xs-6
            // Bar chart
            div(sparkline="", data-bar-color="{{colorByName('primary')}}", data-height="30", data-bar-width="6", data-bar-spacing="6", values="1,3,4,7,5,9,4,4,7,5,9,6,4") 
          .col-xs-6
            h4.m0 +150
            p.m0.text-muted: small From last month
      .panel-body
        .row.row-table.text-center
          .col-xs-6
            p.m0.text-muted Gross income
            h4.m0 12000
          .col-xs-6
            p.m0.text-muted Net income
            h4.m0 5100
    // END widget
  .col-lg-4
    // START widget
    .panel.widget
      .row.row-table.row-flush
        .col-xs-8
          img.img-responsive(src="app/img/bg1.jpg", alt="")
        .col-xs-4.align-middle.bg-info
          .text-center            
            .text-lg.mt0 11&deg;
            p Cold
            em.fa.fa-sun-o.fa-2x
    // END widget
// END row

// START row
.row
  .col-lg-3
    // START widget
    .panel.widget
      .row.row-table.row-flush
        .col-xs-4.bg-info.text-center
          em.fa.fa-users.fa-2x
        .col-xs-8
          .panel-body.text-center
            h4.mt0 10k
            p.mb0.text-muted VISITORS
    // END widget
  .col-lg-3
    // START widget
    .panel.widget
      .row.row-table.row-flush
        .col-xs-4.bg-danger.text-center
          em.fa.fa-music.fa-2x
        .col-xs-8
          .panel-body.text-center
            h4.mt0 100%
            p.mb0.text-muted VOLUME
    // END widget
  .col-lg-3
    // START widget
    .panel.widget
      .row.row-table.row-flush
        .col-xs-4.bg-inverse.text-center
          em.fa.fa-code-fork.fa-2x
        .col-xs-8
          .panel-body.text-center
            h4.mt0 150 
            p.mb0.text-muted FORKS
    // END widget
  .col-lg-3
    // START widget
    .panel.widget
      .row.row-table.row-flush
        .col-xs-4.bg-green.text-center
          em.fa.fa-inbox.fa-2x
        .col-xs-8
          .panel-body.text-center
            h4.mt0 10
            p.mb0.text-muted NEW MESSAGES
    // END widget
// END row

// START row
.row
  .col-lg-4
    // START widget
    .panel.widget
      .row.row-table.row-flush
        .col-xs-5
          picture.lateral-picture
            img(src="app/img/bg2.jpg", alt="")
        .col-xs-7.align-middle.p-lg
          .pull-right
            a(href="#").btn.btn-primary.btn-sm Register
          p
            span.text-lg 16
            | Aug
          p: strong EVENT INVITATION
          p Donec posuere neque in elit luctus tempor consequat enim egestas. Nulla dictum egestas leo at lobortis.
    // END widget
  .col-lg-4
    // START widget
    .panel.widget
      .panel-body.bg-danger.text-center
        .clearfix
          .pull-left 200 Following
          .pull-right 150 Followers
        img.img-thumbnail.img-circle.thumb96(src="app/img/user/06.jpg", alt="Image")
        h4.mt0 Lois Berry
        p.m0
          em.fa.fa-fw.fa-map-marker
          |  San Francisco, California
        .clearfix
          .pull-left 15k Likes
          .pull-right 100 Feeds
    // END widget
  .col-lg-4
    // START widget
    .panel.widget(ng-controller="GMapController")
      .gmap(ui-map='myMap1', ui-options='mapOptions1')
      .panel-body.bg-inverse
        .row.row-table
          .col-xs-6
            .h2.m0 Find Us!
          .col-xs-1
            em.fa.fa-map-marker.fa-3x
          .col-xs-5
            p.m0 Street 123
            p.m0 Location, Unknow
    // END widget
// END row

// START row
.row
  .col-lg-4
    // START widget
    .panel.widget
      img.img-responsive(src="app/img/bg1.jpg", alt="Image")
      .panel-body
        .row.row-table.text-center
          .col-xs-4
            p Comments
            h3.m0.text-primary 700
          .col-xs-4
            p Likes
            h3.m0.text-primary 1500
          .col-xs-4
            p Shots
            h3.m0.text-primary 300
    // END widget
  .col-lg-4
    // START widget
    .panel.widget
      .panel-body
        .row.row-table
          .col-xs-6.text-center
            img.img-circle.thumb96(src='app/img/user/09.jpg', alt="Image")
          .col-xs-6
            h3.mt0 Peggy Peters
            ul.list-unstyled
              li.mb-sm
                em.fa.fa-map-marker.fa-fw
                |  ASD, Qwerty
              li.mb-sm
                em.fa.fa-twitter.fa-fw
                |  @asdasd
              li.mb-sm
                em.fa.fa-envelope.fa-fw
                |  asdasd@mail.com
      .panel-body.bg-inverse
        .row.row-table.text-center
          .col-xs-4
            p.m0.h3 700
            p.m0.text-muted Followers
          .col-xs-4
            p.m0.h3 1500
            p.m0.text-muted Following
          .col-xs-4
            p.m0.h3 510
            p.m0.text-muted Loved
    // END widget
    // START widget
    .panel.widget
      .panel-body
        .row.row-table
          .col-xs-6.text-center
            img.img-thumbnail.img-circle.img-responsive.thumb96(src="app/img/user/06.jpg", alt="Image")
          .col-xs-6
            .pull-right
              a(href="#").btn.btn-success Follow
            h3.mt0 Sarah Pierce
            p.text-muted 150 Following / 100 Followers
    // END widget
  .col-lg-4
    .row
      .col-sm-6
        // START widget
        .panel.widget
          .panel-body.bg-info.text-center
            .text-lg.m0 300
            p Re-Tweets
            .mb-lg
            em.fa.fa-twitter.text-alpha
        // END widget
      .col-sm-6
        // START widget
        .panel.widget
          .panel-body.bg-primary.text-center
            .text-lg.m0 12&deg;
            p Bariloche
            .mb-lg
            em.fa.fa-sun-o
        // END widget
    .row
      .col-sm-6
        // START widget
        .panel.widget
          .panel-body.bg-danger.text-center
            .radial-bar.radial-bar-40.radial-bar.radial-bar-danger.m0
              img(src="app/img/user/03.jpg",alt="")
            p
              strong 40% 
              span complete
        // END widget
      .col-sm-6
        // START widget
        .panel.widget
          .panel-body.bg-purple.text-center
            p: img.img-rounded.thumb80(src='app/img/user/08.jpg',alt="")
            p
              strong Mika 
              span is now following you
        // END widget
    .row
    // START widget
    .panel.widget
      .panel-body
        .row.row-table
          .col-xs-3.text-center
            img.img-thumbnail.img-circle.img-responsive.thumb64(src="app/img/user/06.jpg", alt="Image")
          .col-xs-5.text-center
            h3.m0 Sylvia Morris
          .col-xs-4
            a(href="#").btn.btn-purple 
              em.fa.fa-hand-o-right
              span  Touch
    // END widget
// END row

// START row
.row
  .col-lg-3.col-md-6
    // START panel
    .panel.panel-primary
      .panel-heading
        .row
          .col-xs-3
            em.fa.fa-comments.fa-5x
          .col-xs-9.text-right
            .text-lg 26
            p.m0 New Comments!
      a(href='#').panel-footer.bg-gray-dark.bt0.clearfix.btn-block
        span.pull-left View Details
        span.pull-right
          em.fa.fa-chevron-circle-right
      // END panel
  .col-lg-3.col-md-6
    // START panel
    .panel.panel-green
      .panel-heading
        .row
          .col-xs-3
            em.fa.fa-tasks.fa-5x
          .col-xs-9.text-right
            .text-lg 12
            p.m0 New Tasks!
      a(href='#').panel-footer.bg-gray-dark.bt0.clearfix.btn-block
        span.pull-left View Details
        span.pull-right
          em.fa.fa-chevron-circle-right
    // END panel
  .col-lg-3.col-md-6
    // START panel
    .panel.panel-warning
      .panel-heading
        .row
          .col-xs-3
            em.fa.fa-shopping-cart.fa-5x
          .col-xs-9.text-right
            .text-lg 124
            p.m0 New Orders!
      a(href='#').panel-footer.bg-gray-dark.bt0.clearfix.btn-block
        span.pull-left View Details
        span.pull-right
          em.fa.fa-chevron-circle-right
    // END panel
  .col-lg-3.col-md-6
    // START panel
    .panel.panel-danger
      .panel-heading
        .row
          .col-xs-3
            em.fa.fa-support.fa-5x
          .col-xs-9.text-right
            .text-lg 13
            p.m0 Support Tickets!
      a(href='#').panel-footer.bg-gray-dark.bt0.clearfix.btn-block
        span.pull-left View Details
        span.pull-right
          em.fa.fa-chevron-circle-right
    // END panel
// END row
// START panel tab
.panel
  tabset(justified="true")
    tab
      tab-heading 
        em.fa.fa-clock-o.fa-fw
        | Tasks Panel
      div
        // START list group
        .list-group.mb0
          a.list-group-item(href='#')
            span.label.label-purple.pull-right just now
            em.fa.fa-fw.fa-calendar.mr
            | Calendar updated
          a.list-group-item(href='#')
            span.label.label-purple.pull-right 4 minutes ago
            em.fa.fa-fw.fa-comment.mr
            | Commented on a post
          a.list-group-item(href='#')
            span.label.label-purple.pull-right 23 minutes ago
            em.fa.fa-fw.fa-truck.mr
            | Order 392 shipped
          a.list-group-item(href='#')
            span.label.label-purple.pull-right 46 minutes ago
            em.fa.fa-fw.fa-money.mr
            | Invoice 653 has been paid
          a.list-group-item(href='#')
            span.label.label-purple.pull-right 1 hour ago
            em.fa.fa-fw.fa-user.mr
            | A new user has been added
          a.list-group-item(href='#')
            span.label.label-purple.pull-right 2 hours ago
            em.fa.fa-fw.fa-check.mr
            | Completed task: "pick up dry cleaning"
          a.list-group-item(href='#')
            span.label.label-purple.pull-right yesterday
            em.fa.fa-fw.fa-globe.mr
            | Saved the world
          a.list-group-item(href='#')
            span.label.label-purple.pull-right two days ago
            em.fa.fa-fw.fa-check.mr
            | Completed task: "fix error on sales page"
          a.list-group-item(href='#')
            span.label.label-purple.pull-right two days ago
            em.fa.fa-fw.fa-check.mr
            | Completed task: "fix error on sales page"
        // END list group
        .panel-footer.text-right
          a.btn.btn-default.btn-sm(href='#') View All Activity 
    tab
      tab-heading
        em.fa.fa-money.fa-fw
        | Transactions Panel
      div
        // START table responsive
        .table-responsive
          table.table.table-bordered.table-hover.table-striped
            thead
              tr
                th Order #
                th Order Date
                th Order Time
                th Amount (USD)
            tbody
              tr
                td 3326
                td 10/21/2013
                td 3:29 PM
                td $321.33
              tr
                td 3325
                td 10/21/2013
                td 3:20 PM
                td $234.34
              tr
                td 3324
                td 10/21/2013
                td 3:03 PM
                td $724.17
              tr
                td 3323
                td 10/21/2013
                td 3:00 PM
                td $23.71
              tr
                td 3322
                td 10/21/2013
                td 2:49 PM
                td $8345.23
              tr
                td 3321
                td 10/21/2013
                td 2:23 PM
                td $245.12
              tr
                td 3320
                td 10/21/2013
                td 2:15 PM
                td $5663.54
              tr
                td 3319
                td 10/21/2013
                td 2:13 PM
                td $943.45
        // END table responsive
        .panel-footer.text-right
          a.btn.btn-default.btn-sm(href='#') View All Transactions
// END panel tab
